<template>
  <div class="page-content">
    <div class="page-title">岗位管理</div>
    <div class="content-box">
      <div class="btn add-job" @click="toEdit(null, 1)">新增岗位</div>
      <div class="search">
        <div class="search-line clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">岗位名称：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.name" autocomplete="off" />
          </div>
          <div class="fl">
            <div class="btn check-btn" @click="searchAll">查询</div>
          </div>
        </div>
        <div class="search-line clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">状态：</span>
            <a-select default-value="请选择" :value="searchParams.isPublish" @change="selectState">
              <a-select-option :value="item.value" v-for="item in isPublish" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>
      <div class="tabel">
        <a-table
          :columns="columns"
          :data-source="data"
          rowKey="id"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <span slot="ageRequire" slot-scope="record">
            <span class="">{{ record.ageRequire || '-' }}</span>
          </span>
          <span slot="otherRequire" slot-scope="record">
            <span class="">{{ record.otherRequire || '-' }}</span>
          </span>
          <span slot="isPublish" slot-scope="record">
            <span class="state out-state" v-if="!record.isPublish">未发布</span>
            <span class="state in-state" v-else>已发布</span>
          </span>
          <!-- slot-scope="text, record" -->
          <span slot="handler" slot-scope="record">
            <!-- <a href="javascript:void(0);">详情</a> -->
            <a
              class="handler-item"
              href="javascript:void(0);"
              v-if="!record.isPublish"
              @click="toEdit(record, 2)"
              >编辑</a
            >
            <a
              class="handler-item"
              href="javascript:void(0);"
              v-if="!record.isPublish"
              @click="publish(record.id)"
              >发布</a
            >
            <a
              class="handler-item"
              href="javascript:void(0);"
              v-if="record.isPublish"
              @click="toEdit(record, 3)"
              >详情</a
            >
            <a
              class="handler-item"
              href="javascript:void(0);"
              v-if="record.isPublish"
              @click="cancelPublish(record.id)"
              >取消发布</a
            >
            <a
              class="handler-item"
              href="javascript:void(0);"
              v-if="!record.isPublish"
              @click="deleteJob(record.id)"
              >删除</a
            >
          </span>
        </a-table>
      </div>
    </div>
    <a-modal
      v-model="visible1"
      class="add-job-modal"
      :width="720"
      destroyOnClose
      :title="modelTitle"
      @ok="handleOk"
    >
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">岗位名称：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editNmae"
            placeholder="请输入不超过20个字的岗位名称"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">薪资范围：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editSalary"
            placeholder="请输入，参考格式：3千-5千/月"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">用工类型：</span>
        </div>
        <div class="input-box fl">
          <a-select defaultValue="请选择" @change="selectWorkerType">
            <a-select-option :value="item.value" v-for="item in workTypesSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">学历要求：</span>
        </div>
        <div class="input-box fl">
          <a-select defaultValue="请选择" @change="selectEducation">
            <a-select-option :value="item.value" v-for="item in educationSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">经验要求：</span>
        </div>
        <div class="input-box fl">
          <a-select defaultValue="请选择" @change="selectExperience">
            <a-select-option
              :value="item.value"
              v-for="item in experiencesSelect"
              :key="item.value"
            >
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">性别要求：</span>
        </div>
        <div class="input-box fl">
          <a-select defaultValue="请选择" @change="selectGenders">
            <a-select-option :value="item.value" v-for="item in gendersSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">年龄要求：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editAgeRequire"
            placeholder="请输入，参考格式：20-30岁"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">其他要求：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editOtherRequire"
            placeholder="不超过100个字"
            maxlength="100"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">发布设置：</span>
        </div>
        <div class="input-box fl">
          <a-radio-group :defaultValue="1" :options="isPublishNow" @change="radioChange" />
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model="visible2"
      class="add-job-modal"
      :width="720"
      destroyOnClose
      :title="modelTitle"
      @ok="handleOk"
    >
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">岗位名称：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editNmae"
            placeholder="请输入不超过20个字的岗位名称"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">薪资范围：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editSalary"
            placeholder="请输入，参考格式：3千-5千/月"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">用工类型：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editWorkerTypeDes || '请选择'" @change="selectWorkerType">
            <a-select-option :value="item.value" v-for="item in workTypesSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">学历要求：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editEducationDes || '请选择'" @change="selectEducation">
            <a-select-option :value="item.value" v-for="item in educationSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">经验要求：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editExperienceDes || '请选择'" @change="selectExperience">
            <a-select-option
              :value="item.value"
              v-for="item in experiencesSelect"
              :key="item.value"
            >
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">性别要求：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editGenderDes || '请选择'" @change="selectGenders">
            <a-select-option :value="item.value" v-for="item in gendersSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">年龄要求：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editAgeRequire"
            placeholder="请输入，参考格式：20-30岁"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">其他要求：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            v-model="editOtherRequire"
            placeholder="不超过100个字"
            maxlength="100"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">发布设置：</span>
        </div>
        <div class="input-box fl">
          <a-radio-group :defaultValue="1" :options="isPublishNow" @change="radioChange" />
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model="visible3"
      class="add-job-modal"
      :width="720"
      destroyOnClose
      :title="modelTitle"
      @ok="visible3 = false"
    >
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">岗位名称：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            disabled
            v-model="editNmae"
            placeholder="请输入不超过20个字的岗位名称"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">薪资范围：</span>
        </div>
        <div class="input-box fl">
          <input
            type="text"
            disabled
            v-model="editSalary"
            placeholder="请输入，参考格式：3千-5千/月"
            maxlength="20"
          />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">用工类型：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editWorkerTypeDes" disabled @change="selectWorkerType">
            <a-select-option :value="item.value" v-for="item in workTypesSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">学历要求：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editEducationDes" disabled @change="selectEducation">
            <a-select-option :value="item.value" v-for="item in educationSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">经验要求：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editExperienceDes" disabled @change="selectExperience">
            <a-select-option
              :value="item.value"
              v-for="item in experiencesSelect"
              :key="item.value"
            >
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <span class="dot">*</span>
          <span class="name">性别要求：</span>
        </div>
        <div class="input-box fl">
          <a-select :defaultValue="editGenderDes"  disabled @change="selectGenders">
            <a-select-option :value="item.value" v-for="item in gendersSelect" :key="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">年龄要求：</span>
        </div>
        <div class="input-box fl">
          <input type="text" disabled :value="editAgeRequire || '-'" maxlength="20" />
        </div>
      </div>
      <div class="add-job-item clearfix">
        <div class="front fl">
          <!-- <span class="dot">*</span> -->
          <span class="name">其他要求：</span>
        </div>
        <div class="input-box fl">
          <div style="width: 500px;">
            {{ editOtherRequire }}
          </div>
          <!-- <input
            type="text"
            :value="editOtherRequire || '-'"
            placeholder="不超过100个字"
            maxlength="100"
            disabled
          /> -->
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "no",
    key: "no",
    width: 60,
    ellipsis: true,
    align: "center"
  },
  {
    title: "岗位名称",
    dataIndex: "name",
    ellipsis: true,
    width: 150,
    align: "center"
  },
  {
    title: "薪资范围",
    dataIndex: "salary",
    width: 120,
    ellipsis: true,
    align: "center"
  },
  {
    title: "用工类型",
    dataIndex: "workerTypeDes",
    width: 100,
    ellipsis: true,
    align: "center"
  },
  {
    title: "学历要求",
    dataIndex: "educationDes",
    width: 120,
    ellipsis: true,
    align: "center"
  },
  {
    title: "经验要求",
    dataIndex: "experienceDes",
    width: 120,
    ellipsis: true,
    align: "center"
  },
  {
    title: "性别要求",
    dataIndex: "genderDes",
    width: 100,
    ellipsis: true,
    align: "center"
  },
  {
    title: "年龄要求",
    // dataIndex: "ageRequire",
    width: 120,
    ellipsis: true,
    scopedSlots: { customRender: "ageRequire" },
    ellipsis: true,
    align: "center"
  },
  {
    title: "其他要求",
    // dataIndex: "otherRequire",
    width: 250,
    ellipsis: true,
    scopedSlots: { customRender: "otherRequire" },
    ellipsis: true,
    align: "center"
  },
  {
    title: "更新时间",
    dataIndex: "updateTimeDes",
    width: 120,
    ellipsis: true,
    align: "center"
  },
  {
    title: "状态",
    // dataIndex: "stateType",
    align: "center",
    width: 120,
    ellipsis: true,
    scopedSlots: { customRender: "isPublish" }
  },
  {
    title: "操作",
    // key: "handler",
    align: "center",
    width: 200,
    ellipsis: true,
    scopedSlots: { customRender: "handler" }
  }
];

export default {
  data() {
    return {
      data: [],
      type: 1, // 1-新增，2-编辑，3-详情
      columns,
      isPublish: [
        { text: "请选择", value: "" },
        { text: "未发布", value: 0 },
        { text: "已发布", value: 1 }
      ],
      isPublishNow: [
        { label: "立即发布", value: 1 },
        { label: "暂不发布", value: 0 }
      ],
      visible1: false,
      visible2: false,
      visible3: false,
      modelTitle: "",
      pagination: {
        showQuickJumper: true,
        total: 1,
        current: 1,
        pageSize: this.$config.pageSize,
        showTotal: (total, range) =>
          `共 ${total} 条记录 第${Math.ceil(range[0] / this.pagination.pageSize)} / ${Math.ceil(
            total / this.pagination.pageSize
          )} 页`
      },
      workTypesSelect: [],
      educationSelect: [],
      experiencesSelect: [],
      gendersSelect: [],
      currentId: "",
      // jobDetail: {}
      eDitIsPublish: 1,
      editNmae: "",
      editSalary: "",
      editWorkerTypeDes: "",
      editWorkerTypeId: "",
      editEducationDes: "",
      editEducationId: "",
      editExperienceDes: "",
      editExperienceId: "",
      editGenderDes: "",
      editGenderId: "",
      editAgeRequire: "",
      editOtherRequire: "",
      searchParams: {
        code: "",
        companyId: "",
        isPublish: "",
        name: "",
        pageNo: 1,
        pageSize: this.$config.pageSize
      },
    };
  },
  computed: {
    status() {
      return this.$store.state.companyInfo.status;
    },
    editJobDetail() {
      return {
        name: this.editNmae,
        otherRequire: this.editOtherRequire,
        salary: this.editSalary,
        workerType: this.editWorkerTypeId,
        isPublish: this.eDitIsPublish,
        gender: this.editGenderId,
        experience: this.editExperienceId,
        education: this.editEducationId,
        ageRequire: this.editAgeRequire
      };
    }
  },
  watch: {
    '$route.path': function(newVal, oldVal) {
      if(newVal !== oldVal) {
        this.init()
      }
    }
  },
  created() {
    this.init();
    // 获取性别类型
    this.$http.get("/commons/genders", { params: { isLimit: true } }).then((res) => {
      if (res.success) {
        this.gendersSelect = res.model.genders;
      }
    });
    // 获取工作类型
    this.$http.get("/commons/work-types", { params: { isLimit: true } }).then((res) => {
      if (res.success) {
        this.workTypesSelect = res.model.workTypes;
      }
    });
    // 获取教育程度
    this.$http.get("/commons/educations", { params: { isLimit: true } }).then((res) => {
      if (res.success) {
        this.educationSelect = res.model.educations;
      }
    });
    // 获取经验要求
    this.$http.get("/commons/experiences", { params: { isLimit: true } }).then((res) => {
      if (res.success) {
         this.experiencesSelect = res.model.experiences.filter(item => {
          return item.text !== '无经验'
        });
      }
    });
  },
  methods: {
    init() {
      this.searchParams.code = ''
      this.searchParams.companyId = ''
      this.searchParams.isPublish = ''
      this.searchParams.name = ''
      this.searchParams.pageNo = ''
      this.searchParams.pageSize = this.$config.pageSize
      this.getJobList()
    },
    getJobList() {
      this.$http.get("/companies/jobs", { params: this.searchParams }).then((res) => {
        if (res.success) {
          this.pagination.current = res.model.pageNo;
          this.pagination.total = res.model.totalCount;
          this.data = res.model.data.map((item, index) => {
            item.no = index + 1;
            return item;
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.searchParams.pageNo = pagination.current;
      this.getJobList();
    },
    searchAll() {
      this.searchParams.pageNo = 1;
      this.getJobList();
    },
    selectState(value) {
      this.searchParams.isPublish = value;
      this.searchParams.pageNo = 1;
      this.getJobList();
    },
    // 取消发布
    cancelPublish(id) {
      this.$confirm({
        title: "提示",
        content: "确认取消发布？",
        onOk: () => {
          this.$http
            .put("/companies/jobs/publish-statuses/" + id, { isPublish: 0 })
            .then((res) => {
              if (res.success) {
                this.getJobList();
                this.$message.success("取消发布成功");
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(() => {
              this.$message.error("取消发布失败");
            });
        }
      });
    },
    publish(id) {
      this.$confirm({
        title: "提示",
        content: "确认发布？",
        onOk: () => {
          this.$http
            .put("/companies/jobs/publish-statuses/" + id, { isPublish: 1 })
            .then((res) => {
              if (res.success) {
                this.getJobList();
                this.$message.success("发布成功");
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(() => {
              this.$message.error("发布失败");
            });
        }
      });
    },
    deleteJob(id) {
      this.$confirm({
        title: "提示",
        content: "确认删除该岗位？",
        onOk: () => {
          this.$http
            .delete("/companies/jobs/" + id)
            .then((res) => {
              if (res.success) {
                this.getJobList();
                this.$message.success("删除成功");
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        }
      });
    },
    radioChange(res) {
      console.log(res);
      this.eDitIsPublish = res.target.value;
    },
    selectWorkerType(value) {
      this.editWorkerTypeId = value;
    },
    selectEducation(value) {
      this.editEducationId = value;
    },
    selectExperience(value) {
      this.editExperienceId = value;
    },
    selectGenders(value) {
      this.editGenderId = value;
    },
    toEdit(record, type) {
      if (this.status === 0) {
        this.$message.error("请先进行企业认证再新增岗位");
        return;
      }
      this.type = type;
      if (type == 1) {
        this.modelTitle = "新增岗位";
        this.eDitIsPublish = 1; // 默认立即发布
        this.editNmae = "";
        this.editSalary = "";
        this.editWorkerTypeDes = "";
        this.editWorkerTypeId = "";
        this.editEducationDes = "";
        this.editEducationId = "";
        this.editExperienceDes = "";
        this.editExperienceId = "";
        this.editGenderDes = "";
        this.editGenderId = "";
        this.editAgeRequire = "";
        this.editOtherRequire = "";
        this.visible1 = true;
      } else {
        this.currentId = record.id;
        this.editNmae = record.name;
        this.editSalary = record.salary;
        this.editWorkerTypeDes = record.workerTypeDes;
        this.editWorkerTypeId = record.workerType;
        this.editEducationDes = record.educationDes;
        this.editEducationId = record.education;
        this.editExperienceDes = record.experienceDes;
        this.editExperienceId = record.experience;
        this.editGenderDes = record.genderDes;
        this.editGenderId = record.gender;
        this.editAgeRequire = record.ageRequire;
        this.editOtherRequire = record.otherRequire;
        if (type == 2) {
          this.visible2 = true;
          this.modelTitle = "编辑岗位";
        }
        if (type == 3) {
          this.visible3 = true;
          this.modelTitle = "岗位详情";
        }
      }
    },
    handleOk() {
      if (this.type == 1) {
        this.$http.post("/companies/jobs", this.editJobDetail).then((res) => {
          if (res.success) {
            this.getJobList();
            this.visible1 = false;
            this.$message.success("新增成功");
          } else {
            this.$message.error(res.message);
          }
        });
      }
      if (this.type == 2) {
        this.$http.put("/companies/jobs/" + this.currentId, this.editJobDetail).then((res) => {
          if (res.success) {
            this.getJobList();
            this.visible2 = false;
            this.$message.success("编辑成功");
          } else {
            this.$message.error(res.message);
          }
        });
      }
    }
  }
};
</script>

<style lang="less"></style>
